<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="root">
        <base-input :label="name" :value="value" @input="inputValue"></base-input>
        <div>{{value}}</div>
    </div>
    <script>
        Vue.component('base-input', {
            inheritAttrs: false,
            props: ['label', 'value'],
            computed: {
                inputListeners: function () {
                    let app = this;
                    // 我们从父级添加所有的监听器
                    return Object.assign({}, this.$listeners, {
                        // 然后我们添加自定义监听器，
                        // 或覆写一些监听器的行为
                        input: function (event) {
                            app.$emit('input', event.target.value)
                        }
                    })
                }
            },
            template: `
                <label>
                  {{ label }}
                  <input
                    v-bind="$attrs"
                    v-bind:value="value"
                    v-on="inputListeners"
                  >
                </label>
              `
        })
        let vm = new Vue({
            el:"#root",
            data: {
                name: 'name',
                value: '输入名称'
            },
            methods: {
                inputValue: function (val) {
                    this.value = val
                }
            }
        })
    </script>
</body>
</html>